Creating a Custom Tab

You can add a new custom tab to the viewer tab navigation by modifying the markup located in viewerTemplate.html. The tab must be placed inside the div element with the data attribute data-pcc-nav and it must have a unique data-pcc-nav-tab value:

Example	Copy Code
<div class="pcc-tabset pcc-nav-tabset" data-pcc-nav> <!-- An example of a custom tab --> <div class="pcc-tab" data-pcc-nav-tab="custom"> <div class="pcc-tab-item"> <!-- Tab label --> </div> <div class="pcc-tab-pane"> <!-- Tab content --> </div> </div> <!-- End custom tab --> </div>

Example

Copy Code

<div class="pcc-tabset pcc-nav-tabset" data-pcc-nav>
    <!-- An example of a custom tab -->
    <div class="pcc-tab" data-pcc-nav-tab="custom">
        <div class="pcc-tab-item">
            <!-- Tab label -->
        </div>
        <div class="pcc-tab-pane">
            <!-- Tab content -->
        </div>
    </div>
    <!-- End custom tab -->
</div>